<template>
	<view>
		<view class="shipment">	
				<u-cell-group>
					<u-cell
					@click="tzz"
					size="large"
					title="hhh 15233456789"
					style="background: #fff;"
					isLink
					label="北京市 北京市 朝阳区 dfbv"
					></u-cell>						
				</u-cell-group>
		</view>
		<view class="goods">
			<navigator class="item">
				<view class="picture">
					<image src="/static/uni.png" mode=""></image>
				</view>
				<view class="meta">
					<view class="name ellipsis">
						医用级缓鼻塞，可调式鼻腔清洗器
					</view>
					<view class="attrs">
						等渗儿童款单喷头
					</view>
					<view class="prices">
						<text class="pay-price symbol">￥39.00</text>
						<text class="price symbol">￥39.00</text>
					</view>
					<view class="count">
						x1
					</view>
				</view>
			</navigator>
		</view>
		<view class="related">
			<view class="itum">
				<u-picker :show="show" :columns="columns" @cancel="handleCancel"></u-picker>
				<u-cell-group>
					<u-cell
					size="large"
					title="配送时间"
					style="background: #fff;"
					value="内容"
					isLink
					@click="show = true"
					></u-cell>						
				</u-cell-group>
			</view>
			<view class="it">
				<u-form-item labelWidth="70" label="订单备注" prop="">
					<u--input style="border: 0;" placeholder="选题，建议留言前先与商家沟通确认"></u--input>
				</u-form-item>
			</view>
		</view>
		<view class="settlement">
			<view class="intt">
				<u-cell-group>
					<u-cell
					size="large"
					title="商品总价:"
					style="background: #fff;"
					value="￥39.00"
					></u-cell>						
				</u-cell-group>
			</view>
			<view class="intt">
				<u-cell-group>
					<u-cell
					size="large"
					title="运费:"
					style="background: #fff;"
					value="￥7.00"
					></u-cell>						
				</u-cell-group>
			</view>
		</view>
	</view>
	<view class="toolbar">
		<view class="total-pay symbol">
			￥<text class="number">46.00</text>
		</view>
		<view class="button" @click="tj">
			 提交订单 
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const show = ref(false);
const columns = reactive([
  ['时间不限（周一至周日）', '工作日送（周一至周五）', '周末配送（周六至周日）']
]);

const tzz=()=>{
	uni.navigateTo({
		url:'/pages/mapSet/mapSet'
	})
}

const handleConfirm = (value) => {
  show.value = false; // 关闭选择器
  console.log('确认选择:', value); // 处理确认的逻辑
};

const handleCancel = () => {
  show.value = false; // 处理取消确认的逻辑
};

// 提交订单
const tj=()=>{
	console.log("提交订单");
}
</script>

<style lang="scss">
.toolbar{
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: calc(var(--window-bottom));
	    z-index: 1;
	    background-color: #fff;
	    height: 3.125rem;
	    padding: 0 0.625rem;
	    border-top: 0.03125rem solid #eaeaea;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    box-sizing: content-box;
		.total-pay{
			content: "¥";
			font-size: 80%;
			margin-right: 0.15625rem;
			color: #cf4444;
			.number{
				    font-size: 1.25rem;
				    color: #cf4444;
			}
		}
		.button{
			width: 6.875rem;
			    text-align: center;
			    line-height: 2.25rem;
			    font-size: .8125rem;
			    color: #fff;
			    border-radius: 2.25rem;
			    background-color: #27ba9b;
		}
}
.shipment{
	margin: 0.625rem;
	    padding: 0 0.9375rem 0 2.625rem;
	    font-size: .8125rem;
	    border-radius: 0.3125rem;
	    background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png) 0.625rem center/1.5625rem no-repeat #fff;
	    position: relative;
}
.goods{
    margin: 0.625rem;
    padding: 0 0.625rem;
    border-radius: 0.3125rem;
    background-color: #fff;
	.item{
			display: flex;
		    padding: 0.9375rem 0;
		.picture{
				width: 5.3125rem;
			    height: 5.3125rem;
			    border-radius: 0.3125rem;
			    margin-right: 0.625rem;
				image{
					width: 100%;
					height: 100%;
				}
		}
		.meta{
				flex: 1;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			    position: relative;
				.name{
					    height: 2.5rem;
					    font-size: .8125rem;
					    color: #444;
				}
				.attrs{
					    line-height: 1.8;
					    padding: 0 0.46875rem;
					    margin-top: 0.1875rem;
					    font-size: .75rem;
					    align-self: flex-start;
					    border-radius: 0.125rem;
					    color: #888;
					    background-color: #f7f7f8;
				}
				.prices{
					    display: flex;
					    align-items: baseline;
					    margin-top: 0.1875rem;
					    font-size: .875rem;
						.pay-price{
							    margin-right: 0.3125rem;
							    color: #cf4444;
						}
						.price{
							    font-size: .75rem;
							    color: #999;
							    text-decoration: line-through;
						}
				}
				.count{
					position: absolute;
					    bottom: 0;
					    right: 0;
					    font-size: .8125rem;
					    color: #444;
				}
		}
	}
}
.related{
	    margin: 0.625rem;
	    border-radius: 0.3125rem;
	    background-color: #fff;
	.itum{
			border: 0;
		    font-size: .8125rem;
		    color: #333;
	}
	.it{
		padding: 0 0.825rem;
	}
}
.settlement{
	    margin: 0.625rem;
	    border-radius: 0.3125rem;
	    background-color: #fff;
		overflow: hidden;
		.intt{
			    height: 2.5rem;
			    font-size: .8125rem;
			    color: #333;
		}
}
</style>
